<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>

    <th:block th:include="central/include :: header('站位人工操作')" />
    <th:block th:include="include :: vue2-org-tree-css" />

    <style>
        .ibox-content{
            padding: 0px;
        }
        .row{
            width: 100%;
            margin: 0px;
        }

        .operationStationsItem {
            cursor:pointer
        }
        *{
            margin: 0px;
            padding: 0px;
        }
        #container {
            position: relative;
            padding: 20px;
            height: 50px;
        }

        #left_side {
            position: absolute;
            top: 20px;
            left: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
        }

        #content {
            margin: 0px 210px 0px 210px;
            border: solid 0px #e7eaec;
            height: 100%;
            font-size:35px;
            text-align: center;
        }

        #right_side {
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid 0px #e7eaec;
            width: 170px;
            height: 100%;
            font-size: medium;
            text-align: center;
        }
        .area {
            /*height: 700px;*/
            /*margin: 20px 20px 20px 20px;*/
            height: 100%;
            margin: 0px 10px;
        }
        .areaLineList {
            /*height: 350px;*/
            height: 100%;
            background-color: white;
            padding: 10px 0px;
        }

        .operationStationsContainer {
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
            margin: 0px;
        }

        .area1{
            width:calc( calc(100% - 10px)/8 );
            position: relative;
        }
        .area2{
            width:calc(calc(100% - 20px) /4);
            position: relative;
        }
        .area3{
            width: calc(calc(100% - 40px) /2);
            position: relative;
        }
        .area4{
            width: calc(calc(100% - 20px) /2);
            position: relative;
        }
        .areaContent{
            display: inline-block;
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
            margin-bottom: 5px;
        }
        .areacontentbottom{
            /*position:absolute;*/
            height: 70px;
            width: 100%;
            background-color: transparent;
            border-top: solid 1px #e7eaec;
            bottom: 0px;
            line-height: 70px;
            text-align: center;
            font-weight: 800;
            font-family:Arial,sans-serif;
        }
        .areacontenttop{
            position:relative;
            height: calc(100% - 72px);
            padding: 0px;
            width: 100%;
            top: 0px;
        }
        .areacontenttopitem{
            height: calc(100% - 10px);
            background-color: white;
            position: absolute;
            border: solid 1px #e7eaec;
            top: 5px;
        }
        .operationStationsItem{
            padding: 5px;
            margin: 0px;
            height: calc(100% - 72px);
        }
        .operationStationsItemContainer{
            background-color: white;
            border: solid 1px #e7eaec;
            width: 100%;
            height: 100%;
        }
        .operationStationsItemHead{
            margin: 0px;
        }
        .operationStationsItemHead>div{
            padding: 0px;
        }
        .title_head{
            position:absolute;
            text-align: left;
            height: 30px;
            padding: 0px;
            top: 5px;
            width: 100% ;
        }
        .info{
            margin: 0px;
            height: calc(100% - 45px);
        }
        .cellhead{
            /*width: 50%;height: 85px;float: left*/
            padding: 0px;
        }
        .cell{
            border-radius: 3px;
            margin: 0 auto;
            width:60px;
            height:60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .processinfo{

            border: solid 1px #e7eaec;
            border-radius: 3px;
            background-color: green;
            text-align: center;
            color: white;
            font-size: small;
        }
        p{
            text-align: center;
            margin: 0px;
        }
        .cellhead {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .automaticArea:hover{
            /* 光标是一个红色的圈加一个斜杠）*/
            cursor:not-allowed;
        }

        /*文字不自动换行*/
        .operationStationsContainer div,h4,p,span{
            white-space:nowrap;
            text-overflow:ellipsis;
            word-break:break-all;
            overflow:hidden;
        }
        .operation-station-processing-status{
            text-align: center;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div th:replace="central/header::header('集合管控系统')"></div>
    <div class="ibox-content" id="app">
        <confirm-dialog-component :operation-station="activeOperationStation" ref="confirmDialog"></confirm-dialog-component>
        <div class="row">
            <div class="area">
                <div class="areaLineList" >
                    <template v-for="(area,index) in areaList">
                        <div :class="'areaContent area'+area.operationStations.length" v-render="area.id" >
                            <div class="operationStationsContainer row">
                                <template v-for="(operationStation,index1) in area.operationStations" >
                                    <template v-if="area.type==areaType.MANUAL_OPERATION">
                                        <div :class="'operationStationsItem manualArea col-sm-'+12/area.operationStations.length"
                                              @click="selectionOperationStation(operationStation)">
                                            <div class="operationStationsItemContainer">
                                                <div style="height:40px;">
                                                    <div class="operationStationsItemHead row">
                                                        <div class="col-sm-6"  style="line-height: 30px;"  :title="operationStation.name" >{{operationStation.name}}</div>
                                                        <div class="col-sm-6 operation-station-processing-status" v-if="operationStation.taskStatus">
                                                            <el-tag
                                                                    v-for="(item,index) in taskStatusDataList"
                                                                    v-if="item.dictValue == operationStation.taskStatus"
                                                                    :key="item.index"
                                                                    :type="item.listClass"
                                                                    effect="dark">
                                                                {{ item.dictLabel }}
                                                            </el-tag>
                                                        </div>
                                                        <div class="col-sm-6 operation-station-processing-status" v-else>
                                                            <el-tag type="" effect="dark">空闲中</el-tag>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info row">
                                                    <div class="cellhead col-sm-6">
                                                        <p>产品编号</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.materialNo|formatData" placement="top">
                                                                <span>{{operationStation.materialNo|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>产品批次号</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.batchNo|formatData" placement="top">
                                                                <span>{{operationStation.batchNo|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>当前工序</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.processStepName|formatData" placement="top">
                                                                <span>{{operationStation.processStepName|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>加工时长</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.processingTime|formatData" placement="top">
                                                                <span>{{operationStation.processingTime|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <div :class="'operationStationsItem automaticArea col-sm-'+12/area.operationStations.length"
                                        @click="selectionAutomaticOperationStation(operationStation)">
                                            <div class="operationStationsItemContainer">
                                                <div style="height:40px;">
                                                    <div class="operationStationsItemHead row">
                                                        <div class="col-sm-6 " style="line-height: 30px;" :title="operationStation.name">{{operationStation.name}}</div>
                                                        <div class="col-sm-6 operation-station-processing-status" v-if="operationStation.taskStatus">
                                                            <el-tag
                                                                    v-for="(item,index) in taskStatusDataList"
                                                                    v-if="item.dictValue == operationStation.taskStatus"
                                                                    :key="item.index"
                                                                    :type="item.listClass"
                                                                    effect="dark">
                                                                {{ item.dictLabel }}
                                                            </el-tag>
                                                        </div>
                                                        <div class="col-sm-6 operation-station-processing-status" v-else>
                                                            <el-tag type="" effect="dark">空闲中</el-tag>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="info row">
                                                    <div class="cellhead col-sm-6">
                                                        <p>产品编号</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.materialNo|formatData" placement="top">
                                                                <span>{{operationStation.materialNo|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>产品批次号</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.batchNo|formatData" placement="top">
                                                                <span>{{operationStation.batchNo|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>当前工序</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.processStepName|formatData" placement="top">
                                                                <span>{{operationStation.processStepName|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                    <div class="cellhead col-sm-6">
                                                        <p>加工时长</p>
                                                        <div class="cell">
                                                            <el-tooltip effect="dark" :content="operationStation.processingTime|formatData" placement="top">
                                                                <span>{{operationStation.processingTime|formatData}}</span>
                                                            </el-tooltip>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </template>
                                </template>
                            </div>
                            <div class="areacontentbottom">{{area.name}}</div>
                        </div>
                    </template>
                </div>
            </div>
            <div class="row table-container">
                <div class="select-table table-striped col-sm-6 " style="width: 50%">
                    <p style="font-weight: bold;">可操作物料列表</p>
                    <table id="bootstrap-table"></table>
                </div>
                <div class="select-table table-striped col-sm-6 " style="width: 50%">
                    <p style="font-weight: bold;">操作工位使用记录列表</p>
                    <table id="bootstrap-table1"></table>
                </div>
            </div>
        </div>

    </div>
</div>
<template id="confirm-dialog-template">
    <el-dialog
            :title="operationStation.name+'加工物料确认'"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
        <el-form :model="form" :rules="rules" :ref="formRefName">
            <el-form-item label="操作工位名称" prop="name" >
                <el-input v-model="operationStation.name" :disabled="true" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="物料所属批次号" prop="batchNo" >
                <el-input v-model="activeFreeMaterial.batchNo" :disabled="true" placeholder="请先选择物料编号"></el-input>
            </el-form-item>
            <el-form-item label="物料编号" prop="materialNo" >
                <el-select v-model="form.materialNo" placeholder="请选择物料编号">
                    <el-option v-for="(item,index) in freeMaterialList" :key="index" :value="item.value" :label="item.lable"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<th:block th:include="central/include :: footer" />
<th:block th:include="include :: vue2-org-tree-js" />
<script th:inline="javascript">

    const prefix = ctx+"central/stationSelection"

    let areaOfColorDatas = [[${@dict.getType('area_of_color')}]];
    let taskStatusDatas = [[${@dict.getType('sys_task_status')}]];
    //物料缓存map
    const materialCacheMap = new Map();

    //跳转至人工站位操作页面
    function toManualOperationStationPage(title,params){
        const data = {
            id:null,//操作工位编号
            batchNo:null,//操作工位产品批次号
            materialNo:null,
        }
        for(let lt in data){
            data[lt] = params[lt]
        }
        $.modal.openOptions({title:title, url:ctx + "central/manualOperationStation?"+ tansParams(data),
            btn:['<i class="fa fa-close"></i> 关闭'],full:true,
            yes(index, layero){
                $.modal.close(index);
            }
        })
        //window.location.href = ctx + "central/manualOperationStation?"+ tansParams(data)
    }

    function checkAndInit(title,data){
        $.axiosRequest.post(ctx+"central/manualOperationStation/checkAndInit",data)
            .then(res=>{
                toManualOperationStationPage(title,data)
            })
    }

    const vm  = new Vue({
        el:'#app',
        data(){
            return{
                areaList:[],
                areaType:area_type,
                activeOperationStation:{},
                areaOfColorMap:new Map(),
                taskStatusDataList:taskStatusDatas
            }
        },methods:{
            getAreaOperationStation() {
                $.axiosRequest.get(prefix+"/list")
                    .then(res=>{
                        let data = res.data
                        this.areaList = data
                    })
            },selectionOperationStation(operationStation){
                this.activeOperationStation = operationStation
                //1.判断当前工位是否绑定的产品编号 并且 有加工状态
                if(operationStation.materialNo && operationStation.taskStatus){
                    toManualOperationStationPage(operationStation.name,this.activeOperationStation)
                }else{
                    this.$refs['confirmDialog'].openDialog()
                }
            },//选择的是自动工作
            selectionAutomaticOperationStation(operationStation){
                $.modal.msgError(`操作工位：${operationStation.name} 为自动区域不能进行操作！`)
            }
        },filters:{
            //data 为字段 map对象
            echoDictLabel(value,data,defaultValue='无'){
                if(data.has(key))
                    return data.get(key)
                return defaultValue
            },formatData(value,defaultValue='无'){
                if(value){
                    return value
                }
                return defaultValue
            }
        },directives:{
            render(el,binding,vnode){
                const {value} =binding
                if(value){
                    const areaOfColorMap = vm.$data.areaOfColorMap
                    el.style.backgroundColor = areaOfColorMap.get(value.toString()).cssClass
                }
            }
        },created(){
            this.getAreaOperationStation()
            areaOfColorDatas.forEach((item)=>this.areaOfColorMap.set(item.dictValue,item))
        },components:{
            confirmDialogComponent:{
                template:'#confirm-dialog-template',
                props:{
                    operationStation:{
                        type:Object,
                        default:()=>{},
                    }
                },
                data(){
                    return{
                        dialogVisible:false,
                        formRefName:'ruleForm',
                        form:{
                            id:null,//操作工位编号
                            batchNo:null,//操作工位产品批次号
                            materialNo:null,
                        },
                        freeMaterialList:[],
                        rules:{
                            materialNo:[
                                { required: true, message: '请选择物料编号', trigger: 'change' },
                            ]
                        }
                    }
                },methods:{
                    handleConfirm(){
                       this.$refs[this.formRefName].validate((valid)=>{
                           if(valid){
                               checkAndInit(this.operationStation.name,this.form)
                           }else{
                               $.modal.msgError("必填项不能为空！")
                           }
                       })
                    },
                    handleClose(done){
                        const _this = this
                        $.modal.confirm("确认关闭当前对话框?", function() {
                            _this.reset()
                            _this.closeDialog()
                        });

                    },destroy(){
                        this.$destroy()
                        this.$el.parentNode.removeChild(this.$el)
                    },
                    closeDialog(){
                        this.dialogVisible = false
                    },openDialog(){
                        this.dialogVisible = true
                        this.$nextTick(()=>{
                            const operationStation = this.operationStation
                            if(this.dialogVisible && operationStation && Object.getOwnPropertyNames(operationStation).length>0){
                                this.init()
                            }
                        })
                    },reset(){
                        // this.$refs[this.formRefName].resetFields();
                        // this.freeMaterialList = []
                        //this.$data包含现有的data数据，
                        //this.$options.data()中是原有的data数据
                        //Object.assign :方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
                        //Object.assign(target,...sources)
                        //target目标对象 source源对象
                        Object.assign(this.$data, this.$options.data())

                    },init(){
                        const form = this.form
                        for(let lt in form){
                            form[lt] = this.operationStation[lt]
                        }
                        if(materialCacheMap.has(this.form.id)){
                            this.freeMaterialList = materialCacheMap.get(this.form.id)
                            this.materialFillFirst()
                        }else{
                            this.getFreeMaterialList()
                        }
                    },getFreeMaterialList(){
                        const operationStationId = this.form.id
                        $.axiosRequest.get(prefix+"/getFreeMaterialListByOperationStationId/"+operationStationId)
                            .then(res=>{
                                const freeMaterialList = res.data
                                if(freeMaterialList && freeMaterialList instanceof Array && freeMaterialList.length>0){
                                    this.freeMaterialList = freeMaterialList
                                    materialCacheMap.set(operationStationId,this.freeMaterialList)
                                    this.materialFillFirst()
                                }else{
                                    const freeMaterialList = this.freeMaterialList
                                    if(! freeMaterialList instanceof Array || freeMaterialList.length==0){
                                        const operationStation = this.operationStation
                                        this.$alert(`${operationStation.name} 未找到可以加工的物料！`, '提示', {
                                            confirmButtonText: '确定',
                                            type: 'warning',
                                            callback: action => {
                                                this.reset()
                                                this.closeDialog()
                                            }
                                        })
                                    }
                                }
                            })
                    },materialFillFirst(){
                        const freeMaterialList = this.freeMaterialList

                        if(freeMaterialList instanceof Array && freeMaterialList.length>0)
                            this.form.materialNo = freeMaterialList[0].value
                    }
                },computed:{
                    activeFreeMaterial(){
                        const activeMaterial = this.freeMaterialList.find(item=>item.value==this.form.materialNo)
                        if(activeMaterial){
                            return activeMaterial.data
                        }
                        return {batchNo:''}
                    }
                },watch:{
                    // operationStation(newVal,oldVal){
                    //     if(this.dialogVisible && newVal && Object.getOwnPropertyNames(newVal).length>0){
                    //         this.init()
                    //     }
                    // }
                },beforeDestroy(){
                    // this.reset()
                    // this.closeDialog()
                }
            }
        }
    })
    let materialListOfFree = [];

    $(function() {
        /*可执行的加工物料列表 表格初始化*/
        var options = {
            requestPrefix: ctx + "central/centralMaterial",
            uniqueId:'id',
            modalName: "物料",
            signName: "top_central_material",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            // showColumns: false,
            queryParams:{
                state:state.OK,
                materialStatus:material_status.FREE_OF_STATUS,
            },onDblClickRow(row){
                handleMaterialOfOperationStation(row)
            },onLoadSuccess(data){
                materialListOfFree = data.rows
            },
            columns: [
                {
                    field: 'id',
                    title: '编号',
                    visible: true,
                    sortable:true,
                },
                {
                    field: 'batchNo',
                    title: '物料批次号',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'typeId',
                    title: '物料类型名称',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip($.common.getItemField(row.materialType,'name'));
                    }
                },
                {
                  field:'operationStationId',
                  title: '所属操作工位',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip($.common.getItemField(row.operationStation,'name'));
                    }
                },
                {
                    field: 'parentTypeId',
                    title: '合成物料名称',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip($.common.getItemField(row.parentMaterialType,'name'));
                    }
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable:true,
                    visible: false,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'remark',
                    title: '描述',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];

                        actions.push('<a class="btn btn-success btn-xs " href="javascript:void(0)" onclick="handleMaterialOfOperationStation(null,\'' + index + '\')"><i class="fa fa-circle-o-notch"></i>加工</a> ');

                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);

        let optionsOperationStationMaterialLog = {
            id:'bootstrap-table1',
            requestPrefix: ctx + "central/centralOperationStationMaterialLog",
            uniqueId:'id',
            modalName: "操作工位使用记录",
            signName: "top_central_operation_station_material_log",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            // columns:false,
            queryParams:{
                orderByColumn:'createTime',
                isAsc:'desc'
            },
            columns: [
                {
                    field: 'operationStationName',
                    title: '操作工位名称',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'materialId',
                    title: '物料编号',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'materialTypeName',
                    title: '物料类型名称',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'createTime',
                    title: '操作时间',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                },
                {
                    field: 'updateTime',
                    title: '完成时间',
                    sortable:true,
                    formatter: function(value,row,index){
                        return $.table.tooltip(value);
                    }
                }]
        };
        $.table.init(optionsOperationStationMaterialLog);

    });

    function handleMaterialOfOperationStation(data,index){

        if(!data && index){
            data = materialListOfFree [parseInt(index)]
        }

        if(data && data.operationStation){

            const operationStation = data.operationStation
            const operationStationId = operationStation.id
            const areaId = operationStation.areaId
            const areaList = vm.$data.areaList

            const area = areaList.find(item=>item.id=areaId)

            if(area && area.operationStations){
                const operationStation = area.operationStations.find(item=>item.id = operationStationId)
                if(operationStation){
                    if(operationStation.batchNo || operationStation.materialNo){
                        $.modal.msgError(`操作工位：${operationStation.name} 正在操作物料编号：${operationStation.materialNo} 不能给其它物料加工！`);
                        return;
                    }
                    let form = {
                        id:operationStationId,//操作工位编号
                        batchNo:data.batchNo,//操作工位产品批次号
                        materialNo:data.id,
                    }
                    checkAndInit(operationStation.name,form)
                    return
                }
            }
        }
        $.modal.msgError('操作异常，请联系管理员！')
    }
</script>

</body>
</html>

